<template>
    <div class="page has-navbar dest">
        <von-header>
            <span slot="title" class="dest">目的地</span>
        </von-header>
        <div class="page-content">
            <div class="dest-search">
                <div class="ps-left">
                    <i class="ion-ios-search"></i>
                    <input type="text" placeholder="搜索关键词、产品ID"  @focus="inputFocus()">
                </div>
            </div>
            <div class="dest-content">
                <ul class="dest-one dest-ul">
                    <li @click="click1($event)" class="active1">热门</li>
                    <li @click="click1($event)">美洲</li>
                    <li @click="click1($event)">澳新</li>
                    <li @click="click1($event)">欧洲</li>
                </ul>
                <ul class="dest-two" v-if="show">
                </ul>
                <ul class="dest-three">
                </ul>
            </div>
            <popular-search :listsearch="listsearch"></popular-search>
        </div>
    </div>
</template>
<script>
    import PopularSearch from '../../components/popularsearch.vue'
    export default {
        components:{PopularSearch},
        data() {
            return {
                message:'',
                dest_two:{},
                show:true,
                wordChinese:'热门',
                wordEnglish:'hot',
                cityId:'',
                index2:0,
                listsearch:''
            }
        },
        methods:{
            inputFocus(){
                this.axios.get('https://app.toursforfun.com/resource/popularSearch')
                    .then(data=>{
                        this.listsearch=data.data.data
                    })
                    .catch(err=>{
                        console.log(err)
                    })
                $('.home-add').css('display','block')
                $('.home-add').stop().animate({'margin-top':'0','position':'fixed'},250)
                setTimeout(function(){
                    $('.home-home').css('display','none')
                },250)
                $('.tabbar.visible').css('opacity','0')
            },
            click1(ev){
                $(ev.target).addClass('active1').siblings().removeClass('active1')
                this.wordChinese = $(ev.target).html()
                if (this.wordChinese == '热门') {
                    this.wordEnglish = 'hot'
                } else if (this.wordChinese == '美洲') {
                    this.wordEnglish = 'am'
                } else if (this.wordChinese == '澳新') {
                    this.wordEnglish = 'au'
                } else if (this.wordChinese == '欧洲') {
                    this.wordEnglish = 'eur'
                }
                $('.dest-two li,.dest-three li').remove()
                this.click()

            },
            click2(){
                var _this=this
                var twoLi3 = '<li></li>'
                $('.dest-two').delegate("li","click",function(){
                    _this.index2=$(this).index()
                    var length2=_this.message[_this.wordEnglish][_this.index2].city.length
                    $('.dest-three li').remove()
                    $(this).addClass('active2').siblings().removeClass('active2')
                    for(var k=0;k<length2;k++){
                        $('.dest-three').append(twoLi3)
                        $('.dest-three li').eq(k).html(_this.message[_this.wordEnglish][_this.index2].city[k].name)
                    }
                })
            },
            click3(){
                var _this=this
                if(this.message[this.wordEnglish][0].city) {
                    $('.dest-three').delegate("li", "click", function () {
                        var index3 = $(this).index()
                        _this.cityId = _this.message[_this.wordEnglish][_this.index2].city[index3].tour_city_id
                        _this.$router.push('/searchcity/' + _this.cityId)

                    })
                }else{

                }
            },
            click(){
                var twoLi2 = '<li></li>'
                var twoLi3 = '<li></li>'
                for(var i=0;i<this.message[this.wordEnglish].length;i++){
                    $('.dest-two').append(twoLi2)
                    if(this.message[this.wordEnglish][i].city){
                        this.show=true
                        $('.dest-three').css('left','44%')
                        $('.dest-two li').eq(0).addClass('active2')
                        $('.dest-two li').eq(i).html(this.message[this.wordEnglish][i].name)
                    }else{
                        this.show=false
                        $('.dest-three').css('left','17%')
                        $('.dest-three').append(twoLi3)
                        $('.dest-three li').eq(i).html(this.message[this.wordEnglish][i].name)
                    }
                }
                if(this.message[this.wordEnglish][0].city){
                    for(var j=0;j<this.message[this.wordEnglish][0].city.length;j++){
                        $('.dest-three').append(twoLi3)
                        $('.dest-three li').eq(j).html(this.message[this.wordEnglish][0].city[j].name)
                    }
                }
                this.click2()
                this.click3()
            }
        },
        created(){
            this.axios.get('https://app.toursforfun.com/destination/combine/hot')
                .then(data=>{
                    this.message=data.data.data
                    console.log(this.message)
                    this.click()
                })
                .catch(err=>{
                    console.log(err)
                })
        }
    }
</script>

<style>
    .dest .bar.bar-header{
        box-shadow: none;
    }
    .dest-search{
        position: fixed;
        width:100%;
        height:44px;
        padding:7px 15px;
        border-bottom: 1px solid #E0E0E6;
    }
    .dest-search>div.ps-left{
        width:100%;
        display: inline-block;
        height:30px;
        border:1px solid #ccc;
        background: #eee;
        border-radius: 20px;
    }
    .dest-search>div.ps-left i{
        float: left;
        margin:5px 10px;
    }
    .dest-search>div.ps-left input{
        width:90%;
        float: left;
        height:28px;
        border: none;
        outline: none;
        background: #eee;
    }
    .dest-content{
        font-size: 16px;
        color: #777;
    }
    .dest-one{
        position: absolute;
        top: 88px;
        left: 0;
        bottom: 44px;
        width: 17%;
        background-color: #F4F3F8;
        border-right: 1px solid #E0E0E6;
        box-sizing: border-box;
    }
    .dest-two{
        position: absolute;
        top: 88px;
        left: 17%;
        bottom: 44px;
        width: 27%;
        padding-left: 10px;
        background-color: #fff;
        border-right: 1px solid #E0E0E6;
        box-sizing: border-box;
        overflow: auto;
        display: block;
    }
    .dest-three{
        position: absolute;
        top: 88px;
        left: 44%;
        bottom: 44px;
        right: 0;
        padding-left: 10px;
        background-color: #fff;
        overflow: auto;
        display: block;
    }
    .dest-one li{
        cursor: pointer;
        height: 64px;
        margin-right: -1px;
        line-height: 56px;
        text-align: center;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        padding: 8px;
    }
    .dest-one li.active1{
        color: #0092F2;
        background-color: #fff;
    }
    .dest-two li.active2{
        color: #0092F2;
    }
    .dest-two li,.dest-three li{
        cursor: pointer;
        height: 54px;
        line-height: 54px;
        border-bottom: 1px solid #E0E0E6;
        width: 100%;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }
</style>